Drop Down Boxes and Frames

Browser Compatibility: NS3+, IE4+

Before moving through this, you may want to read through one or more of the tutorials leading up to this one. You should be familiar with JavaScript Drop Boxes, and you may want to read about JavaScript and Frames.

Making a javascript drop down box work with frames isn't as bad as it seems. The question is, where do you put in the target information? Well, you can't do this directly, because the script just won't understand something like this:

window.location=document.guideform.guidelinks.options[document.guideform.guidelinks.selectedIndex].value target="right"

If you have read the frames with javascript sections, you may have an idea about how to get your target into this code. What we need to do is make an adjustment on the left of the "=" sign. When you change the window.location value, the new page opens in the current window, whether it is in a frame or not. But with frames, you want the page chosen from a drop box to open in another frame, not in your navigation frame.

The trick is to change window.location to this:

parent.framename.location

What you do is change the word framename above with the name of your target frame, or what you would normally write inside the target=" " attribute.

So, suppose you had a frameset like the one below, using the left frame for navigation and the right frame for content:

<HTML>
<HEAD>
<TITLE>Frames Example 1</TITLE>
</HEAD>
<FRAMESET cols="20%,80%">
<FRAME SRC="jex18.htm" name="left_frame">
<FRAME SRC="jex19.htm" name="right_frame">
<NOFRAMES>
Sorry, you can't see this page..
</NOFRAMES>
</FRAMESET>
</HTML>

Now, since we want the drop box in the left frame, that is the page we need to modify. Above, the left frame is "jex18.htm", and we want to open our drop box links in the right frame, "jex19.htm". Notice how the FRAME tag uses the name=" " attribute. We will need this when we write the code for the drop box.

Now, edit your left frame HTML by adding the dropbox. The thing we need to concentrate on is getting the target frame correct. With our frameset, the right frame is named "right_frame". This is what we use to change our command line when the go button is clicked:

parent.right_frame.location=document.guideform.guidelinks.options[document.guideform.guidelinks.selectedIndex].value

Now, everything your viewers choose from the drop box will open in the right frame. The complete drop box code is below:

<FORM name="guideform"> 
<SELECT name="guidelinks"> 
<OPTION SELECTED value="jex20.htm">Page 1 
<OPTION value="jex21.htm">Cool Page 
</SELECT> 
&nbsp;
<INPUT type="button" name="go" value="Go!" onClick="parent.right_frame.location=document.guideform.guidelinks.options[document.guideform.guidelinks.selectedIndex].value">
</FORM>

If you want to see this in action, check out the example below by clicking the View Example link:

View Example

What if I'm using the no-button Drop Box?

You do the same thing with the code, changing only the information to the left of the "=" sign. The code for one of these is below:

<FORM name="guideform"> 
<SELECT name="guidelinks" onChange="parent.right_frame.location=document.guideform.guidelinks.options[document.guideform.guidelinks.selectedIndex].value"> 
<OPTION SELECTED value="jex20.htm">Page 1 
<OPTION value="jex21.htm">Cool Page 
</SELECT> 
</FORM>

So, now you have the drop box working with your frames, rather than against them- or maybe that should be the other way around?

Well, that does it for now, try out the next section on JavaScript Object Detection.

Drop Boxes and Frames

What if I'm using the no-button Drop Box?